import { getShareAccountPage, updateTopicShareAccount } from '@/services/api/api-cues-topic';
import { SettingOutlined } from '@ant-design/icons';
import { DrawerForm } from '@ant-design/pro-form';
import ProTable from '@ant-design/pro-table';
import { Button, message } from 'antd';
import React, { useState } from 'react';

interface DetailsTopicShareAccountProps {
  topicId: string | undefined;
  shareAccounts: string[] | undefined;
  onRefurbish: () => void;
}

const DetailsTopicShareAccount: React.FC<DetailsTopicShareAccountProps> = ({
  topicId,
  shareAccounts,
  onRefurbish,
}) => {
  const [selectedShareAccountRowKeys, setSelectedShareAccountKeysState] = useState<React.Key[]>();

  return (
    <DrawerForm
      key="share_account_drawer_form"
      title="修改指派阅读、录用记者"
      drawerProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      trigger={
        <Button key="button_share_account" icon={<SettingOutlined />}>
          修改指派阅读、录用记者
        </Button>
      }
      initialValues={{
        isDemandClipboard: 1,
      }}
      onVisibleChange={(visible: boolean) => {
        if (visible) {
          setSelectedShareAccountKeysState(shareAccounts);
        }
      }}
      onFinish={async (values) => {
        const response = await updateTopicShareAccount({
          id: topicId,
          accountIds: selectedShareAccountRowKeys,
        });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return true;
        } else {
          return false;
        }
      }}
    >
      <ProTable<CuesTopicData.UserAccount>
        ghost
        rowSelection={{
          selectedRowKeys: selectedShareAccountRowKeys,
          type: 'checkbox',
          onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
            setSelectedShareAccountKeysState(selectedRowKeys);
          },
        }}
        tableAlertRender={false}
        columns={[
          {
            title: '单位',
            key: 'or',
            dataIndex: 'organizationName',
            hideInSearch: true,
            width: 200,
          },
          {
            title: '姓名',
            key: 'name',
            dataIndex: 'name',
          },
        ]}
        request={async (params = {}) => {
          const response = await getShareAccountPage({
            topicId,
            ...params,
          });
          return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
          });
        }}
        rowKey="id"
        tableLayout="fixed"
        dateFormatter="string"
        headerTitle={false}
        bordered
        // options={{
        //   search: {
        //     name: 'name',
        //     onSearch: (keyword: string) => {
        //       setSelectedShareAccountKeysState([]);
        //       return true;
        //     },
        //   },
        // }}
        search={false}
        pagination={{
          showQuickJumper: false,
          showSizeChanger: false,
          defaultPageSize: 100,
          showLessItems: false,
        }}
      />
    </DrawerForm>
  );
};
export default DetailsTopicShareAccount;
